<!-- 设备管理-设备列表页面 -->
<template>
  <px-card shadow="never">
    <div>
      <px-form ref="queryRef" class="custom-form-ui-new" :model="queryParams" inline label-width="90px">
        <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" />
        <EquipSystemTree
          :className="queryParams.className"
          :systemCode="queryParams.systemCode"
          @changeAllSystemCodes="changeAllSystemCodes"
          @changeSystemCodes="changeSystemCodes"
          @clearSystem="clearSystem"
        />
        <px-form-item label="抄表组">
          <px-input v-model="queryParams.groupName" placeholder="请输入抄表组名称" clearable />
        </px-form-item>
        <px-form-item>
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetQuery">重置</px-button>
        </px-form-item>
      </px-form>
      <div class="flex-button-row">
        <px-button v-has="'SYSTEM_AMR_GROUP_ADD'" icon="Plus" type="primary" @click="handleAdd">新增抄表组</px-button>
      </div>

      <px-table v-loading="loading" :data="equipTypeList" height="calc(100vh - 325px)" border>
        <px-table-column label="序号" width="60" align="center" fixed="left" show-overflow-tooltip>
          <template #default="{ $index }">
            {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
          </template>
        </px-table-column>
        <px-table-column min-width="150" show-overflow-tooltip label="抄表组" prop="groupName" />
        <px-table-column min-width="150" show-overflow-tooltip label="抄表Code" prop="groupCode" />
        <px-table-column min-width="80" show-overflow-tooltip label="科室" prop="classNameDesc" />
        <px-table-column min-width="150" show-overflow-tooltip label="系统" prop="systemCodeDesc" />
        <px-table-column min-width="120" show-overflow-tooltip label="抄表项目数量" prop="itemNum">
          <template #default="scope">
            <px-button type="primary" link @click="handleToItems(scope.row)">{{ scope.row.itemNum }}</px-button>
          </template>
        </px-table-column>
        <px-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <px-tooltip content="抄表项" placement="top">
              <px-button v-has="'SYSTEM_AMR_GROUP_DETAIL'" link icon="Odometer" type="primary" @click="handleToItems(scope.row)" />
            </px-tooltip>
            <px-tooltip content="编辑" placement="top">
              <px-button v-has="'SYSTEM_AMR_GROUP_EDIT'" link icon="EditPen" type="primary" @click="handleEdit(scope.row)" />
            </px-tooltip>
            <px-tooltip content="删除" placement="top">
              <px-button v-has="'SYSTEM_AMR_GROUP_DELETE'" link icon="Delete" type="primary" @click="handleDelete(scope.row)" />
            </px-tooltip>
          </template>
        </px-table-column>
      </px-table>

      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="queryTable"
      />
    </div>
    <!-- 新增/修改抽屉 -->
    <AddGroupDrawer :visible="isDrawerShow" :drawerType="drawerType" :detailData="detailData" @queryTable="queryTable" @closeDrawer="closeDrawer" />
  </px-card>
</template>

<script setup lang="ts">
defineOptions({
  name: "SYSTEM_AMR_GROUP"
});
import { deleteAmrList, queryAmrList } from "@/api/system/amr";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import AddGroupDrawer from "./components/addGroupDrawer.vue";

const router = useRouter();

onMounted(() => queryTable());

const isDrawerShow = ref(false);
const loading = ref(true);
const total = ref(0);

const data = reactive<Record<string, any>>({
  eqpId: "",
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  drawerType: "",
  detailData: {},
  equipTypeList: [], // 列表数据
  systemCodeList: [] // 系统下拉框
});

const { equipTypeList, queryParams, drawerType, detailData, systemCodeList } = toRefs(data);

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  queryParams.value.systemCode = "";
  systemCodeList.value = [];
};
// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  queryParams.value.systemCode = val;
  systemCodeList.value = val2;
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  queryParams.value.className = val2;
  queryParams.value.systemCode = val3;
  systemCodeList.value = val4;
};
// 系统组件值改变触发
const clearSystem = val => {
  queryParams.value.systemCode = "";
  systemCodeList.value = [];
};

const queryTable = async () => {
  try {
    loading.value = true;
    const temp = JSON.parse(JSON.stringify(queryParams.value));
    delete temp.systemCode;
    const res = await queryAmrList({ systemCodeList: systemCodeList.value, ...temp });
    equipTypeList.value = res?.data || [];
    total.value = res?.total;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  systemCodeList.value = [];
  queryTable();
}

/** 新增按钮操作 */
const handleAdd = () => {
  isDrawerShow.value = true;
  drawerType.value = "add";
};
const handleToItems = row => {
  router.push(`/system/amr/amrItem?id=${row.id}&code=${row.groupCode}`);
};

const handleEdit = async row => {
  drawerType.value = "edit";
  detailData.value = row;
  isDrawerShow.value = true;
};
// 关闭抽屉
const closeDrawer = () => {
  isDrawerShow.value = false;
  detailData.value = {};
  drawerType.value = "add";
};
/** 删除按钮操作 */
const handleDelete = async (row: any) => {
  const { id, groupName } = row;
  PxMessageBox.confirm(`要删除当前抄表组“${groupName}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteAmrList({ id });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>
